<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{user.title}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;
            _gridHeight = $(document).height()-110;
        }

        $(function () {
            resizePageSize()
            var _columnWidth = (_gridWidth-150)/5;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/user/getUserInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [

                    {display : 'userUuid',name : 'userUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{user.name}]]*/"",name : 'userName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.nick}]]*/"",name : 'niceName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.mobile}]]*/"",name : 'mobile',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{user.email}]]*/"",name : 'email',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : _columnWidth, sortable : true,align : 'center',
                        process:function (v,trid,rowData) {
                            var htmlContents = ''
                            if([[${#authorization.expression('hasRole("ROLE_cldk_data_user_role")')}]]){
                                htmlContents +=' <a href="#" title=[[#{user.role.allocate}]] onclick="loadSingleZtree(\'' + v+ '\')">'
                                htmlContents +='<i class="glyphicon glyphicon-wrench"></i>'
                                htmlContents +='</a>'
                            }
                            if([[${#authorization.expression('hasRole("ROLE_cldk_data_user_del")')}]]){
                                htmlContents +=' <a href="#" title=[[#{common.delete}]] onclick="deleteUserSingle(\'' + v+  '\',\'' + rowData.niceName + '\')">'
                                htmlContents +='    <i class="glyphicon glyphicon-minus-sign"></i>'
                                htmlContents +='</a>'
                            }

                            return htmlContents;
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            query();
            //查询按钮
            $("#query-btn-id").click(function () {
                query()
            });
            //初始化搜索框
            $("#search-user-id").searchTools({
                colModel:[
                    {display:[[#{user.name}]],domId:'search-user-name'},
                    {display:[[#{user.nick}]],domId:'search-nice-name'},
                    {display:[[#{user.email}]],domId:'search-email'},
                    {display:[[#{user.mobile}]],domId:'search-mobile'}
                ],
                reback:function () {
                    query()
                }
            })
            //初始化化配角色对话框
            $("#allow-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var roleIds = []
                            var ztreeObject =  $.fn.zTree.getZTreeObj("allow-role-ztree-id")
                            var checkedNodes = ztreeObject.getCheckedNodes(true)
                            $(checkedNodes).each(function (index,item) {
                                roleIds.push(item.id);
                            })

                            var userUuids = $("#allow-role-dialog-id").attr("userUuids")

                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/saveRoleByUser}]]*/'',
                                data: [
                                    {name:"userUuids",value:userUuids},
                                    {name:"roleIds",value:roleIds},
                                ],
                                success: function (data) {
                                    if(data.success){
                                        //loadAllowZtree()
                                        $("#allow-role-dialog-id").dialog('close')
                                    }else{
                                        message(data.msg)
                                    }
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            })


                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //分配角色按钮
            $("#allow-role-btn-id").click(function () {
                loadAllowZtree();

            });

            //增加用户对话框
            $("#add-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{user.add.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            //TODO 确认
                            var flag = $("#add-form-id .form-control[pattern]").checkDom()
                            if(!flag){
                                return
                            }

                            var addPasswd = $("#add-password-id").val();
                            var addConfirm = $("#add-confirm-id").val();
                            if(addPasswd !== addConfirm){
                                $("#addConfirm").addClass("ui-state-error");
                                return;
                            }

                            $("#add-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //增加按钮
            $("#add-btn-id").click(function () {
                $("#add-form-id .form-control").removeClass("ui-state-error")
                $("#add-form-id").resetForm();
                $("#add-dialog-id").dialog('open')
            });
            //初始化增加用户表单
            $("#add-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {

                    message(data.msg)
                    if(data.success){
                        $("#add-dialog-id").dialog('close')
                        query();
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });

            //修改对话框
            $("#modify-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{user.modify.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("#modify-form-id .form-control[pattern]").checkDom()
                            if(!flag){
                                return
                            }

                            $("#modify-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            //修改用户表单
            $("#modify-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg)
                    if(data.success){
                        $("#modify-dialog-id").dialog('close')
                        query();
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            })
            //删除用户对话框
            $("#delete-user-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{user.delete.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var  userUuids = $("#delete-user-dialog-id").attr('userUuids');
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/user/deleteUserRecycleById}]]*/'',
                                data: [{name:"userUuids",value:userUuids}],
                                success: function (data) {
                                    message(data.msg)
                                    if(data.success){
                                        query()
                                        $("#delete-user-dialog-id").dialog('close')
                                    }
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }

                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            //删除用户按钮
            $("#delete-btn-id").click(function () {
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
                if(ids.length === 0 ){
                    message(/*[[#{common.select}]]*/'')
                    return;
                }
                var niceNames = $("#flexigrid-id").getFlexigridiAttrByIndex(4);
                var niceNameStr = ''
                $(niceNames).each(function (index,item) {
                    niceNameStr+= item+","
                })
                if(niceNameStr !== ''){
                    niceNameStr = niceNameStr.substr(0,niceNameStr.length - 1)
                }

                $("#delete-user-tip-id").text(niceNameStr)
                $("#delete-user-dialog-id").attr('userUuids',ids);
                $("#delete-user-dialog-id").dialog('open')
            });
            //重置密码对话框
            $("#reset-dialog-id").dialog({
                autoOpen : false,
                width : 600,
                modal : true,
                resizable : false,
                title: /*[[#{user.password.reset.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("#reset-form-id .form-control[pattern]").checkDom()
                            if(!flag){
                                return
                            }

                            var resetPasswd = $("#reset-password-id").val();
                            var resetConfirm = $("#reset-confirm-id").val();
                            if(resetPasswd !== resetConfirm){
                                $("#resetConfirm").addClass("ui-state-error");
                                return;
                            }

                            $("#reset-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            //重置密码表单
            $("#reset-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg)
                    if(data.success){
                        $("#reset-dialog-id").dialog('close')
                        query();
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            })
            //重置密码按钮
            $("#reset-passwd-btn-id").click(function () {
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
                if(ids.length === 0){
                    message([[#{common.select}]])
                    return;
                }
                $("#reset-user-uuids-id").val(ids);

                // reset-user-uuids-id
                $("#reset-dialog-id").dialog('open')
            });

        });//ready

        function query() {
            var userName = $("#search-user-name").attr('select-value');
            var niceName = $("#search-nice-name").attr('select-value');
            var email = $("#search-email").attr('select-value')
            var mobile = $("#search-mobile").attr('select-value')
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:'userName',value:userName},
                    {name:'niceName',value:niceName},
                    {name:'email',value:email},
                    {name:'mobile',value:mobile}
                ]
            }).flexReload();
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function loadAllowZtree() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length === 0 ){
                message(/*[[#{common.select}]]*/'')
                return;
            }
            $("#allow-role-dialog-id").attr("userUuids",ids)
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/getRoleByUserId}]]*/'',
                data: [{name:"userUuids",value:ids}],
                success: function (data) {
                    $.fn.zTree.init($("#allow-role-ztree-id"), allocateSetting, data);
                    $("#allow-role-dialog-id").dialog('open')
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }

            });

        }

        function loadSingleZtree(userUuid) {
            $("#allow-role-dialog-id").attr("userUuids",userUuid)
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/user/getRoleBySingUserId}]]*/'',
                data: [{name:"userUuid",value:userUuid}],
                success: function (data) {
                    $.fn.zTree.init($("#allow-role-ztree-id"), allocateSetting, data);
                    $("#allow-role-dialog-id").dialog('open')
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }

            });
        }

        function rowDbclick(r) {
            $(r).dblclick(function () {
                var columnArray = $(r).attr('ch').split('_FG$SP_');
                var userUuid = columnArray[0];
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/user/queryUserListById}]]*/'',
                    data: [{name:"userUuid",value:userUuid}],
                    success: function (data) {
                        //console.info("queryUserListById:" + JSON.stringify(data))
                        if(data){
                            $("#modify-form-id input").each(function (index,item) {
                                var name =  $(item).attr("name");
                                $(this).val(data[name]);
                            })
                            $("#modify-dialog-id").dialog('open')
                        }

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }

                });
            });

        }
        //删除单个用户
        function deleteUserSingle(userUuid,nickName) {
            $("#delete-user-tip-id").text(nickName)
            $("#delete-user-dialog-id").attr('userUuids',userUuid);
            $("#delete-user-dialog-id").dialog('open')
        }

    </script>
    <style>
        header{
            display: flex;
            align-items: center;
            height: 44px;
        }

        header > nav,
        header > a{
            margin-right: 10px;
        }
        .cbit-grid div.bDiv table tr td div a:VISITED{
            color: #0192d1;
        }

        .form-group{
            margin-right: 10px;
        }

        form{
            display: grid;
            grid-template-columns: auto auto
        }
    </style>
</head>
<body>
<header>
    <nav sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="search-user-id" class="search-tools-bar"></nav>

    <a sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="query-btn-id" href="#" th:title="#{common.query}">
        <i class="glyphicon glyphicon-search"></i>
    </a>

    <a sec:authorize="hasRole('ROLE_cldk_data_user_role')" id="allow-role-btn-id" href="#" th:title="#{user.role.allocate}">
        <i class="glyphicon glyphicon-wrench"></i>
    </a>

    <a sec:authorize="hasRole('ROLE_cldk_data_user_add')" id="add-btn-id" href="#" th:title="#{common.add}">
        <i class="glyphicon  glyphicon-plus-sign"></i>
    </a>

    <a sec:authorize="hasRole('ROLE_cldk_data_user_del')" id="delete-btn-id" href="#" th:title="#{common.delete}">
        <i class="glyphicon  glyphicon-minus-sign"></i>
    </a>

    <a id="reset-passwd-btn-id" href="#" th:title="#{user.password.reset}">
        <i class="glyphicon glyphicon-repeat"></i>
    </a>

</header>
<table sec:authorize="hasRole('ROLE_cldk_data_user_query')" id="flexigrid-id"></table>

<div sec:authorize="hasRole('ROLE_cldk_data_user_role')" id="allow-role-dialog-id" style="display: none">
    <ul id="allow-role-ztree-id" class="ztree"></ul>
</div>

<div sec:authorize="hasRole('ROLE_cldk_data_user_add')" id="add-dialog-id" style="display: none">
    <form id="add-form-id" action="addUserInfo" method="post">
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input name="userName" class="form-control" th:placeholder="#{user.name.plchldr}" pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.nick}"></span>
            <input name="niceName" class="form-control" th:placeholder="#{user.nice.name.plchldr}"  pattern="^.+$">
        </div>

        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input name="mobile" class="form-control" th:placeholder="#{user.mobile.plchldr}" type="number" pattern="^[0-9]{11}">
        </div>

        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input name="email" class="form-control" th:placeholder="#{user.email.plchldr}" type="email"
                   pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.password}"></span>
            <input id="add-password-id" name="password" class="form-control" th:placeholder="#{user.password.plchldr}" type="password"　
                   pattern="^.{6,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.confirm}"></span>
            <input id="add-confirm-id" class="form-control" th:placeholder="#{user.password.plchldr}" type="password"
                   pattern="^.{6,}$">
        </div>
    </form>
</div>



<div sec:authorize="hasRole('ROLE_cldk_data_user_mod')" id="modify-dialog-id" style="display: none">
    <form id="modify-form-id" action="modifyUserInfo" method="post">
        <input name="userUuid" type="hidden">
        <div class="form-group">
            <span th:text="#{user.name}"></span>
            <input name="userName" class="form-control" th:placeholder="#{user.name.plchldr}" pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.nick}"></span>
            <input name="niceName" class="form-control" th:placeholder="#{user.nice.name.plchldr}"  pattern="^.+$">
        </div>

        <div class="form-group">
            <span th:text="#{user.mobile}"></span>
            <input name="mobile" class="form-control" th:placeholder="#{user.mobile.plchldr}" type="number" pattern="^[0-9]{11}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.email}"></span>
            <input name="email" class="form-control" th:placeholder="#{user.email.plchldr}" type="email"
                   pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$">
        </div>
    </form>
</div>

<div sec:authorize="hasRole('ROLE_cldk_data_user_del')" id='delete-user-dialog-id' style="display: none">
    <span id="delete-user-tip-id"></span>
</div>

<div id='reset-dialog-id' style="display: none">
    <form id="reset-form-id" action="modifyPasswordById" method="post">
        <input id="reset-user-uuids-id" name="userUuids" type="hidden">
        <div class="form-group">
            <span th:text="#{user.password}"></span>
            <input id="reset-password-id" name="password" class="form-control" th:placeholder="#{user.password.plchldr}" type="password"　
                   pattern="^.{6,}$">
        </div>

        <div class="form-group">
            <span th:text="#{user.confirm}"></span>
            <input id="reset-confirm-id" class="form-control" th:placeholder="#{user.password.plchldr}" type="password"
                   pattern="^.{6,}$">
        </div>
    </form>
</div>
</body>
</html>